<template>
  <!-- 雷达图组件 -->
  <div id="main" ref="BasicRadarChart" class="barEchart" style="width: 500px; height:500px" />
</template>
<script>
// import * as echarts from 'echarts'
export default {
  name: 'BasicRadarChart',
  data() {
    return {
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
    //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      const myChart = this.$echarts.init(this.$refs.BasicRadarChart)
      //   绘制图标
      myChart.setOption({

        radar: {
          indicator: [ // 配置各个维度的最大值
            { name: '易用性', max: 100 },
            { name: '拍照', max: 100 },
            { name: '跑分', max: 100 },
            { name: '续航', max: 100 },
            { name: '维度', max: 100 }
          ]
        //   shape: 'circle' // 配置雷达图最外层的图形 circle  默认是多边形polygon
        },

        series: [
          {
            type: 'radar', // 此图标为雷达图
            label: { // 设置标签的样式
              show: true // 显示数值
            },
            // 阴影面积
            areaStyle: {}, // 将每一个产品的雷达图形成阴影的面积

            data: [
              {
                name: '华为手机1',
                value: [80, 90, 80, 82, 92]
              },
              {
                name: '中兴手机1',
                value: [70, 82, 75, 70, 78]

              }
            ]
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
.barEchart {
    /* background-color: pink; */
    border: 1px solid greenyellow;
}
</style>

